<template>
  <div class="container">
    <div class="content-box">
      <van-cell-group>
        <van-field maxlength="50" @blur="out" v-model.trim="listQuery.article_title" placeholder="请输入标题" />
      </van-cell-group>
      <div class="image-upload">
        <div class="img-box">
          <div class="upload-img">
            <img
              v-if="listQuery.file_path"
              class="img-data"
              :src="listQuery.file_path"
              alt
              width="100%"
            >
            <p v-if="!listQuery.file_path" class="img-text">上传封面</p>
            <tailor2 @setImg="setImg"></tailor2>
          </div>
        </div>
        <!-- <div class="upload-box">
        <van-uploader name="file">
          <div class="upload-img">
            <i>上传封面</i>
          </div>
        </van-uploader>
        </div>-->
      </div>
      <div class="topic van-hairline--surround">
        <span class="topic_text">话题</span>
        <span
          @click="openLink"
          :class="topic ? 'topic_select' : 'topic_select1'"
        >{{listQuery.articletype_name || '填写话题'}}</span>
      </div>
      <van-popup v-model="show" position="top" v-if="!$route.query.otherType" :overlay="true">
        <div class="topicSele">
          <div class="title">
            <p class="iconfont icon-huati"></p>
            <p class="titleName">#话题广场#</p>
          </div>
          <div class="list">
            <div class="tipic" v-for="item in topicType" :key="item.id" @click="topicLink(item)">
              <p>#{{item.articletype_name}}#</p>
            </div>
          </div>
        </div>
      </van-popup>
      <div class="editor-box">
        <editor-view ref="editor" v-if="flag" :content="listQuery.article_content"></editor-view>
      </div>
    </div>
    <div class="submit-box">
      <van-button size="large" type="danger" @click="onSubmit">提交数据</van-button>
    </div>
  </div>
</template>

<script>
import {
  article_save,
  article_edit,
  article_listAllArticletype
} from "@/api/article";
import tailor2 from "../../../components/public/tailor/tailorImg2";
import wangeditor3 from "@/components/wangeditor3";
import TitleItem from "../../../components/public/title/title";
import other from "@/utils/other";
 import { Debounce, Throttle } from "@/utils";

export default {
  components: { "editor-view": wangeditor3, TitleItem, tailor2 },
  data() {
    return {
      topicType: "",
      show: false,
      flag:true,
      isShow: false,
      topicName: "",
      topic: false,
      listQuery: {
        file_path:
          "https://gw.alicdn.com/tfs/TB1WNaQP3HqK1RjSZFEXXcGMXXa-916-516.png",
        articletype_name: ""
      },
      topic_select: { active: true, sort: false }
    };
  },
  methods: {
    out() {
      other.inputBlur();
    },
    openLink() {
      this.show = true;
    },
    setImg(data) {
      this.listQuery.file_path = data;
    },
    beforeRead(file) {
      let param = new FormData(); //创建form对象
      param.append("file_path", file); //通过append向form对象添加数据
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      this.saveImg(param, config);
    },
    saveImg(param, config) {
      this.$http
        .post("/login/reception/htmlfileUpload", param, config)
        .then(res => {
          if (res.data.status == 100) {
            this.listQuery.file_path = res.data.data.file_path;
          }
        });
    },
    async topicSelect() {
      //获取话题
      let { data } = await article_listAllArticletype();
      if (data.status == 100) {
        this.topicType = data.data.rows;
        data.data.rows.forEach(ele => {
          if (this.$route.query.otherType == ele.articletype_name) {
            this.listQuery.articletype_name = ele.articletype_name;
            this.listQuery.articletype_id = ele.id;
          }
        });
        if (this.listQuery.articletype_name == undefined) {
          this.topic = true;
        } else {
          this.topic = false;
        }
      }
    },
    topicLink(item) {
      this.listQuery.articletype_name = item.articletype_name;
      this.listQuery.articletype_id = item.id;
      this.show = false;
    },
    onSubmit:Throttle(function() {
      this.flag = true;
      this.saveObj();
    },1000),
    async saveObj() {
      this.listQuery.article_content = this.$refs.editor.getContent(); //富文本内容
      if (!this.listQuery.article_title) {
        this.$toast("标题不能为空");
        return;
      }
      if (!this.listQuery.file_path) {
        this.$toast("封面图片不能为空");
        return;
      }
      if (!this.listQuery.articletype_name) {
        this.$toast("话题不能为空");
        return;
      }

      if (!this.listQuery.article_content) {
        this.$toast("正文内容不能为空");
        return;
      }

      let query = Object.assign({}, this.listQuery, {
        company_id: localStorage.getItem("companyId") - 0
      });
      let res =
        this.$route.query.name == "edit"
          ? await article_edit(query)
          : await article_save(query);
      let result = res.data;
      if (result.status == 100) {
        this.$route.query.name == "edit"
          ? this.$toast.success("修改数据成功")
          : this.$toast.success("新增数据成功");
        setTimeout(() => {
          this.$router.push({
            path: "/CommunityDetail",
            query: {
              id: result.data.id,
              name: "article"
            }
          });
        }, 1000);
        this.listQuery = {
          article_title: "",
          file_path: "",
          article_content: ""
        };
        this.$refs.editor.clear(); //清空富文本
      }
    }
  },
  created() {
    this.topicSelect();

    if (this.$route.query.name) {
      console.log(this.$route.query.content);
      this.listQuery = this.$route.query.content;
      this.$nextTick(_ => {
        this.$refs.editor.setContent();
      });
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
@import "CommunityTheme";
</style>
